import styled from "styled-components";

export const SongsCoverWrapped = styled.ul`
    margin-top:20px;
    margin-left:-42px;
    overflow:hidden;
  .hot-item-wrap{
    float:left;
    width:182px;
    padding:0 0 30px 42px;
    .hot-item{
      position:relative;
      img{
        width:140px;
        height:140px;
      }
      a.sprite_cover{
        position:absolute;
        height:140px;
        width:140px;
        left:0;
        background-position:0 0;
        line-height:16.8px;
      }
      
      .item-bottom{
        overflow:hidden;
        position:absolute;
        bottom:0;
        width:100%;
        background-position:0 -537px;
        span{
          float:left;
          
          &.listen-icon{
            width:14px;
            height:11px;
            background-position:0 -24px;
            margin:9px 5px 5px 10px;
          }
        }
        .play-count{
          color:#ccc;
          font-size:12px;
          margin-top:6px;
        }
        
        .play-music{
            float:right;
            width:16px;
            height:17px;
            background-position:0 0;
            margin:5px 10px 0 0 ;
        }
      }
      
    }

    p{
      margin-top:8px;
    }
    .hot-item-text{
      display:inline-block;
      max-width:100%;
      color:#000;
      font-size:14px;
      &:hover{
        text-decoration:underline;
      }
    }
  }`
